<template>
  <div class="main-layout">
    <c-header></c-header>
    <div
      id="routerView"
      class="main-router"
      :style="routeStyle"
    >
      <div class="router-container">
         <router-view class="router"/>
         <x-footer></x-footer>
      </div>
    </div>
  </div>
</template>

<script>
import cHeader from '@/components/layout/centerHeader.vue'
import xFooter from '@/components/layout/footer'
export default {
  components: {
    cHeader,
    xFooter
  },
  computed: {
    routeStyle () {
      const { height } = this.$store.state.windowSize
      return {
        height: height ? `${height - 60}px` : '100%',
        paddingTop: '60px'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main-layout{
  height: 100%;
}
.main-router{
  overflow: auto;
}
.router-container{
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}
</style>
